import React, { Component } from 'react';
import { Collapse, Form, Col, Row, Input, Select, DatePicker, Modal, Icon, Button } from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import styles from '@/pages/Operate.less';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import AntdUpload from '@/components/AntdUpload';
import prompt from '@/components/Prompt';
import RechargeForm from './RechargeForm';
const dateFormat = 'YYYY-MM-DD HH:mm';
import AdButton from '@/components/AdButton';
import { codes } from './utils';
const Panel = Collapse.Panel;
const { TextArea } = Input;
const { Option } = Select;

@connect(({ manageEtc, common }) => ({
  manageEtc,
  dictObject: common.dictObject,
}))
@Form.create()
export default class Recharge extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: ['1'],
      fileList: [],
    };
    this.paneSize = ['1'];
  }
  componentDidMount() {
    // this.props.dispatch({
    //   type: 'manageEtc/selectList',
    //   payload: { pageSize: 1000 },
    // });
    // // 查询字典：
    // //币种：
    // this.props.dispatch({
    //   type: 'common/querytDictByCode',
    //   payload: { code: 'currency-type' },
    // });
  }

  // 切换收缩框
  callback = key => {
    this.setState({
      activeKey: key,
    });
  };

  // 添加 或 编辑操作
  operatePaneButton = e => {
    e.stopPropagation();
    e.preventDefault();
    this.child.operatePaneButton();
  };

  // 上传图片
  handleChange = fileList => {
    this.setState({ fileList });
  };

  // 删除图片
  onRemove = deleteFileIds => {};
  onRef = ref => {
    this.child = ref;
  };

  render() {
    const {
      list,
      type,
      form: { getFieldDecorator, selectDetails },
      loading,
      match,
      dictObject,
    } = this.props;

    const { id, activeKey, fileList, ownCompany } = this.state;

    const genExtraBasicInfo = () => (
      <div className={styles.headerTitle}>
        <span>{'ETC卡充值'}</span>
        <div>
          <AdButton
            type="primary"
            onClick={e => this.operatePaneButton(e)}
            text="保存"
            code={codes.rechage}
          />
        </div>
      </div>
    );
    // const basicFormParams = {
    //   details: selectDetails,
    //   onRef: this.onRef,
    //   type: 'recharge',
    // };
    const prefixSelector = getFieldDecorator('currencyType', {
      initialValue: 'CNY',
    })(
      <Select style={{ width: 90 }}>
        {dictObject['currency-type'] &&
          dictObject['currency-type'].map(item => <Option key={item.code}>{item.value}</Option>)}
      </Select>
    );
    return (
      <div className={styles.CollapseUpdate}>
        <PageHeaderWrapper title={type ? '' : genExtraBasicInfo()}>
          <Collapse activeKey={activeKey} onChange={key => this.callback(key)} bordered={false}>
            {this.paneSize.map((item, panelId) => {
              return (
                <Panel
                  header={type == 'modal' ? false : '充值信息'}
                  key={`${panelId + 1}`}
                  className={styles.customPanelStyle}
                >
                  {panelId === 0 && <RechargeForm onRef={this.onRef} />}
                </Panel>
              );
            })}
          </Collapse>
        </PageHeaderWrapper>
      </div>
    );
  }
}
